<!--html-->
<template>
<div class="Oes">
  <!--伸缩盒布局-->
  <!--第一行-->
  <div class="title">统计截止2020-8-31-19:12</div>
  <div class="fir_line">
    <div>
      <div class="num_1">180775</div>
      <div class="desc">新增确诊</div>
    </div>
    <div>
      <div class="num_2">6604154</div>
      <div class="desc">现有确诊</div>
    </div>
    <div>
      <div class="num_3">25311930</div>
      <div class="desc">累计确诊</div>
    </div>
    <div>
      <div class="num_4">17862466</div>
      <div class="desc">累计治愈</div>
    </div>
    <div>
      <div class="num_5">845310</div>
      <div class="desc">累计死亡</div>
    </div>
  </div>
  <!--重点地区确诊趋势-->
  <div class="thr_line">
    <div class="title_1">| 重点地区累计确诊趋势</div>
      <!--<div class="button">
          <el-button-group>
            <el-button type="primary" size="meidum" @click="ED(current)">现有确诊</el-button>
            <el-button type="primary" size="meidum" @click="CD(current)">累计确诊</el-button>
          </el-button-group>
      </div>-->
    <div id="container_1" style="min-width:80%;height:550px"></div>
  </div>
  <!--治愈率最高地区-->
  <div class="fou_line">
    <div class="title_1">| 治愈率最高地区</div>
    <div class="title_2">
      本表只对累计确诊大于1000的地区排序
      <!--<div class="button">
          <el-button-group>
            <el-button type="primary" size="meidum" @click="ED(current)">现有确诊</el-button>
            <el-button type="primary" size="meidum" @click="CD(current)">累计确诊</el-button>
          </el-button-group>
      </div>-->
    </div>
    <div id="container_2" style="min-width:80%;height:550px"></div>
  </div>
  <!--确诊名人-->
  <div class="fiv_line">
    <div class="title_3">确诊名人</div>
    <div class="table_1">
      <el-table :data="table1Data" stripe style="width:100%">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="日期" prop="date"></el-table-column>
        <el-table-column label="简介" prop="introduce"></el-table-column>
      </el-table>
    </div>
    <div class="title_4">部分国家检测人数</div>
    <div class="table_2">
      <el-table :data="table2Data" stripe style="width: 100%">
        <el-table-column label="地区" prop="area"></el-table-column>
        <el-table-column label="检测人数" prop="nopt"></el-table-column>
        <el-table-column label="检测率" prop="der"></el-table-column>
        <el-table-column label="确诊人数" prop="nocc"></el-table-column>
        <el-table-column label="确诊率" prop="dir"></el-table-column>
      </el-table>
    </div>
    <div class="title_5">地区统计</div>
    <div class="table_3">
      <el-table
        :data="table3Data"
        stripe
        show-summary
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        :summary-method="getSummaries"
      >
        <el-table-column label="地区" prop="area" :formatter="formatter"></el-table-column>
        <el-table-column label="新增" prop="add" sortable width="175"></el-table-column>
        <el-table-column label="累计" prop="cumu" sortable width="175"></el-table-column>
        <el-table-column label="治愈" prop="cure" sortable width="175"></el-table-column>
        <el-table-column label="死亡" prop="death" sortable width="175"></el-table-column>
        <el-table-column label="每百万人口确诊数" prop="noccpm" sortable width="175"></el-table-column>
      </el-table>
    </div>
  </div>
</div>
</template>
<!--js-->
<script>
export default {
  data() {
    return {
      /*current:"现有确诊",*/
      //表一
      table1Data:[
          {
              name:"威斯布鲁克",
              date:"07月13日",
              introduce:"美国NBA休斯顿火箭队球员",
          },
          {
              name:"博索纳罗",
              date:"07月07日",
              introduce:"巴西总统",
          },
          {
              name:"德约科维奇",
              date:"06月23日",
              introduce:"塞尔维亚网球巨星",
          },
          {
              name:"纳扎尔巴耶夫",
              date:"06月18日",
              introduce:"哈萨克斯坦前总统",
          },
          {
              name:"尼格马图林",
              date:"06月17日",
              introduce:"哈萨克斯坦下议院议长",
          },
          {
              name:"麦当娜",
              date:"04月30日",
              introduce:"美国乐坛天后",
          },
          {
              name:"速水健太郎",
              date:"04月07日",
              introduce:"日本歌手 声优",
          },
          {
              name:"李·菲耶罗",
              date:"04月06日",
              introduce:"美国演员 参演《大白鲨》4月6日去世",
          },
          {
              name:"杰伊",
              date:"04月05日",
              introduce:"美国演员 参演《异形2》4月5日去世",
          },
          {
              name:"玛丽安娜",
              date:"04月05日",
              introduce:"英国著名歌手",
          },
          {
              name:"唐纳德·肯尼迪",
              date:"04月21日",
              introduce:"美国斯坦福大学前校长 4月21日去世",
          },
          {
              name:"塞普尔维达",
              date:"04月16日",
              introduce:"智利作家 4月16日去世",
          },
          {
              name:"约翰·康威",
              date:"04月11日",
              introduce:"著名数学家 生命游戏之父 4月11日去世 ",
          },
          {
              name:"何金铭",
              date:"04月09日",
              introduce:"著名武术家 叶问弟子 4月9日去世",
          },
          {
              name:"巴克希·多隆",
              date:"04月07日",
              introduce:"以色列前首席拉比 4月12日去世",
          },
          {
              name:"约翰·普莱恩",
              date:"04月07日",
              introduce:"美国传奇民谣大师 4月7日去世",
          },
          {
              name:"塞乔·罗西",
              date:"04月03日",
              introduce:"意大利著名设计师 传奇鞋匠 4月3日去世",
          },
          {
              name:"彼得·辛克莱",
              date:"04月01日",
              introduce:"英国著名经济学家 4月1日去世",
          },
          {
              name:"克里斯·科莫",
              date:"03月31日",
              introduce:"美国CNN主播",
          },
          {
              name:"吉塔·拉姆吉",
              date:"03月31日",
              introduce:"南非艾滋病首席科学家 3月31去世",
          }],
      //表2
      table2Data:[
          {
              area:"美国",
              nopt:"7268万",
              der:"22.1%",
              nocc:"6000365",
              dir:"8.3%",
          },
          {
              area:"俄罗斯",
              nopt:"3510万",
              der:"23.9%",
              nocc:"970865",
              dir:"2.8%",
          },
          {
              area:"英国",
              nopt:"1517万",
              der:"22.8%",
              nocc:"328846",
              dir:"2.2%",
          },
          {
              area:"意大利",
              nopt:"821万",
              der:"13.7%",
              nocc:"262540",
              dir:"3.1%",
          },
          {
              area:"日本",
              nopt:"137万",
              der:"1.1%",
              nocc:"64904",
              dir:"4.7%",
          },
         ],
      //表三
      table3Data:[
          {
              area:"美国",
              add:"41979",
              cumu:"6257571",
              cure:"3496913",
              death:"188900",
              noccpm:"19031",
          },
          {
              area:"巴西",
              add:"42659",
              cumu:"3950931",
              cure:"3345240",
              death:"122596",
              noccpm:"18850",
          },
          {
              area:"印度",
              add:"78357",
              cumu:"3769523",
              cure:"2901908",
              death:"66333",
              noccpm:"2804",
          },
          {
              area:"俄罗斯",
              add:"0",
              cumu:"997072",
              cure:"813603",
              death:"17250",
              noccpm:"6792",
          },
          {
              area:"秘鲁",
              add:"5092",
              cumu:"657129",
              cure:"471599",
              death:"29068",
              noccpm:"20222",
          },
          {
              area:"南非",
              add:"1218",
              cumu:"628259",
              cure:"549993",
              death:"14263",
              noccpm:"10883",
          },
          {
              area:"哥伦比亚",
              add:"8932",
              cumu:"624026",
              cure:"469552",
              death:"20050",
              noccpm:"13714",
          },
          {
              area:"墨西哥",
              add:"6476",
              cumu:"606036",
              cure:"501722",
              death:"65241",
              noccpm:"4787",
          },
          {
              area:"西班牙",
              add:"8115",
              cumu:"470973",
              cure:"196958",
              death:"29152",
              noccpm:"10077",
          },
          {
              area:"阿根廷",
              add:"10504",
              cumu:"428239",
              cure:"308376",
              death:"8919",
              noccpm:"9529",
          },
          {
              area:"智利",
              add:"1419",
              cumu:"413145",
              cure:"385790",
              death:"11321",
              noccpm:"21622",
          },
          {
              area:"伊朗",
              add:"0",
              cumu:"376894",
              cure:"325124",
              death:"21672",
              noccpm:"4581",
          },
          {
              area:"英国",
              add:"1330",
              cumu:"339415",
              cure:"1709",
              death:"41592",
              noccpm:"5139",
          },
          {
              area:"法国",
              add:"0",
              cumu:"323968",
              cure:"87036",
              death:"30666",
              noccpm:"4835",
          },
          {
              area:"沙特阿拉伯",
              add:"0",
              cumu:"316670",
              cure:"291514",
              death:"3929",
              noccpm:"9477",
          },
          {
              area:"孟加拉",
              add:"0",
              cumu:"314946",
              cure:"208177",
              death:"4316",
              noccpm:"1895",
          },
          {
              area:"巴基斯坦",
              add:"441",
              cumu:"296590",
              cure:"281459",
              death:"6318",
              noccpm:"1454",
          },
          {
              area:"土耳其",
              add:"1572",
              cumu:"271705",
              cure:"245929",
              death:"6417",
              noccpm:"3313",
          },
          {
              area:"意大利",
              add:"975",
              cumu:"270189",
              cure:"207944",
              death:"35491",
              noccpm:"4474",
          },
          {
              area:"德国",
              add:"393",
              cumu:"245775",
              cure:"218403",
              death:"9313",
              noccpm:"2961",
          },
          {
              area:"伊拉克",
              add:"0",
              cumu:"238338",
              cure:"180473",
              death:"7123",
              noccpm:"6091",
          },
          {
              area:"梵蒂冈",
              add:"0",
              cumu:"12",
              cure:"12",
              death:"0",
              noccpm:"-",
          },
          {
              area:"蒙古",
              add:"2",
              cumu:"306",
              cure:"296",
              death:"0",
              noccpm:"-",
          },
          {
              area:"柬埔寨",
              add:"0",
              cumu:"274",
              cure:"266",
              death:"0",
              noccpm:"-",
          },
          {
              area:"布隆迪",
              add:"0",
              cumu:"445",
              cure:"357",
              death:"1",
              noccpm:"-",
          },
          {
              area:"钻石号邮轮",
              add:"0",
              cumu:"712",
              cure:"651",
              death:"13",
              noccpm:"-",
          },
          {
              area:"老挝",
              add:"0",
              cumu:"22",
              cure:"21",
              death:"0",
              noccpm:"-",
          },]
    };
  },
  methods: {
    /*ED() {
      this.current ="现有确诊";
    },
    CD() {
      this.current ="累计确诊";
    },*/
    formatter(row, column) {
        return row.area;
      },
    //合计方法
    getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = 'N/A';
          }
        });
        return sums;
      }
  },
  created() {

  },
  mounted() {
    //表一加载
    var chart = Highcharts.chart('container_1', 
    {
    chart: {
        type: 'column'
    },
    title: {
        text: '七日增幅'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45  // 设置轴标签旋转角度
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '%'
        }
    },
    legend: {
        enabled: false
    },
    series: 
    [{
        colors: ['#f66644', '#f66644','#f66644','#f66644','#f66644','#f66644','#f66644','#f66644','#f66644','#f66644'],
        name: '七日增幅',
        data: [
            ['特立尼达和多巴哥',92.9],
            ['牙买加',45.3],
            ['乌干达',44.23],
            ['圭亚那',40.85],
            ['纳米比亚',37.86],
            ['黎巴嫩', 37.7],
            ['伯利兹',37.43],
            ['东卢旺达',37.1],
            ['巴拉圭',33.58],
            ['埃塞俄比亚',32.78],
        ],
        dataLabels: 
        {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // :.1f 为保留 1 位小数
            y: 10
        }
      }]
   });
   //表二加载
  var chart = Highcharts.chart('container_2', {
	chart: {
		type: 'bar'
	},
	title: {
		text: '治愈率最高'
	},
	xAxis: {
		categories: ['卢森堡', '吉布提', '白俄罗斯', '新加坡',
					 '卡塔尔',"马来西亚","加纳","泰国","巴基斯坦","冰岛"],
		title: {
			text: null
		}
	},
	yAxis: {
		min: 0,
		title: {
			align: 'high'
		},
		labels: {
			overflow: 'justify'
		}
	},
	tooltip: {
		valueSuffix: ' %'
	},
	plotOptions: {
		bar: {
			dataLabels: {
				enabled: true,
				allowOverlap: true // 允许数据标签重叠
			}
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -30,
		y: 10,
		floating: true,
		borderWidth: 1,
		backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
		shadow: true
	},
	series: [{
        name: '治愈率',
        colors: ['#f66644', '#f66644','#f66644','#f66644','#f66644','#f66644','#f66644','#f66644','#f66644','#f66644'],
		data: [107.77, 98.89, 98.12, 98.06, 97.4,97.02,96.99,95.59,94.9,94.85]
	}]
});
},
  
};
</script>
<!--css-->
<style scoped>
.title {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.fir_line {
  height: 85px;
  display: flex;
  flex-direction: row; /*first子元素沿着行排列*/
  background-color: #f2f2f2;
  border-radius: 8px;
  text-align: center;
}
.fir_line > div {
  flex: 1; /*做均分*/
  margin: 1px;
  padding: 15px;
}
/*数字样式*/
.fir_line .num_1 {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 20px;
  color: #d50000;
  font-weight: bold;
  line-height: 30px;
}
.fir_line .num_2 {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 20px;
  color: #ff7800;
  font-weight: bold;
  line-height: 30px;
}
.fir_line .num_3 {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 20px;
  color: #580000;
  font-weight: bold;
  line-height: 30px;
}
.fir_line .num_4 {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 20px;
  color: #40a31a;
  font-weight: bold;
  line-height: 30px;
}
.fir_line .num_5 {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 20px;
  color: #5e5e5e;
  font-weight: bold;
  line-height: 30px;
}
.fir_line .desc {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 13px;
  line-height: 30px;
  margin-top: -0.2em;
  font-weight: bold;
}
.thr_line {
  width: 100%;
  height: 597px;
  border-radius: 8px;
  margin-top: 20px;
  border: 1px solid #e8e8e8;
}
.fou_line {
  margin-top: 20px;
  width: 100%;
  height: 623px;
  border-radius: 8px;
  margin-top: 20px;
  border: 1px solid #e8e8e8;
}
.thr_line .container_1{
    height: 10px;
    width: 80%;
}
.thr_line .title_1,
.fou_line .title_1 {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
  padding: 0.5em;
  padding-top: 15px;
}
.fiv_line .title_3,
.fiv_line .title_4,
.fiv_line .title_5 {
  font-family: "微软雅黑", "黑体", "宋体";
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
  padding: 0.5em;
  padding-top: 35px;
}
.thr_line .title_2,
.fou_line .title_2 {
  font-size: 13px;
  color: #585858;
  padding-top: 0.5em;
  width: 90%;
  margin: 0 auto;
}
.thr_line .title_2 .button,
.fou_line .title_2 .button {
  text-align: right;
}
</style>